<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index3.css" type="text/css">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <div id="app">
        <!-- <div :style="{'color':color,'fontSize':fontSize+'px'}">
            文本
        </div> -->
        <!-- <div :class="{'bgColor':hasColor, 'foreColor':hasNum}">
           <h1>aaaaa</h1>
        </div> -->
        <!-- <div :class="[hasColor?'bgColor':'',colorCls]">
            <h1>aaaaaa</h1>
        </div> -->
        <!-- <p v-if="name==='zzy'">沒錯，是本人</p>
        <p v-else-if="name==='z'">差不多，快猜对了</p>
        <p v-else>你是假的吧</p> -->
        <!-- <template v-if="name==='zzy'">沒錯，是本人</template>
        <template v-else-if="name==='z'">差不多，快猜对了</template>
        <template v-else>你是假的吧</template> -->
        <ul>
            <li v-for="(book,index) in boolMatch">{{ index+1 }} -- {{book.name}}--{{ book.price}}</li>
            <li v-for="(value,key,index) in user">{{ index+1 }} ---- {{ key }} : {{value}}</li>
            点击次数：{{counter}}
            点击加一
            <button @click="counter++">+1</button>
            点击加一
            <button @click="handleAdd()">+1</button>
            点击加十
            <button @click="handleAdd(10)">+1</button>
        </ul>
        <div :class='clsProp'>
            <h1>aaaaaa</h1>
        </div>
        <a href="http：//baidu.com" @click="handleClick('禁止打开',$event)">打开链接</a>
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
               hasColor:true,
               hasNum:false,
               colorCls:'foreColor',
               name:'',
               book:[
                   {name:'老人与海',price:200},
                   {name:'十宗罪',price:900},
                   {name:'三国演义',price:790},
                   {name:'绝世唐门',price:490}
               ],
               user:{
                   name:'zeng',
                   gender:'男',
                   age:18
               },
               counter:0,
               color:'red',
               fontSize:80
            },
            computed:{
                bgColorCls:function(){
                   return this.hasColor?'bgColor':' '
                },
                clsProp:function(){
                    return{
                        bgColor:this.hasColor,
                        foreColor:this.hasNum
                    }
                   
                },
                //排序
                booksort:function(){
                  return  this.book.sort(function(a,b){
                    return  a.price-b.price
                  });
                

                },
                //过滤
            boolMatch:function(){
                return this.book.filter(function(book){
                    return book.name.match(/老人与海/)
                })
            }           
         },
         methods:{
             handleAdd:function(count){
                count=count || 1;
                this.counter+=count;
             },
                handleClick:function(message,event){
                    event.preventDefault();
                    window.alert(message)
                }
         }
            
        })
    </script>
</body>
</html>